<!--
 * Description: Focal分配修改页面
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/05/26 14:24
-->

<template>
  <div>
    <!--数据表单-->
    <el-form label-width="200px" :model="formData" size="mini">
      <el-row>
        <!--base Part Number-->
        <el-col :span="24">
          <el-form-item label="Part Number(Base)">
            <span :class="formData.basePartNo ? '' : 'null'">
              {{ formData.basePartNo || '暂无数据' }}
            </span>
          </el-form-item>
        </el-col>
        <!--base Part Name-->
        <el-col :span="24">
          <el-form-item label="Part Name(Base)">
            <span :class="formData.basePartName ? '' : 'null'">
              {{ formData.basePartName || '暂无数据' }}
            </span>
          </el-form-item>
        </el-col>
        <!--base qty -->
        <el-col :span="24">
          <el-form-item label="Qty(Base)">
            <span :class="formData.baseQty ? '' : 'null'">
              {{ formData.baseQty || '暂无数据' }}
            </span>
          </el-form-item>
        </el-col>
        <!--New Part Number-->
        <el-col :span="24">
          <el-form-item label="Part Number(New )">
            <span :class="formData.newPartNo ? '' : 'null'">
              {{ formData.newPartNo || '暂无数据' }}
            </span>
          </el-form-item>
        </el-col>
        <!--New Part Name-->
        <el-col :span="24">
          <el-form-item label="Part Name(New )">
            <span :class="formData.newPartName ? '' : 'null'">
              {{ formData.newPartName || '暂无数据' }}
            </span>
          </el-form-item>
        </el-col>

        <!--New qty -->
        <el-col :span="24">
          <el-form-item label="Qty(New )">
            <span :class="formData.newQty ? '' : 'null'">{{ formData.newQty || '暂无数据' }}</span>
          </el-form-item>
        </el-col>

        <!--采购分类-->
        <!-- <el-col :span="24">
          <el-form-item :label="$t('FdData.commodity')">
            <el-select
              v-model="formData.commodity"
              clearable
              filterable
              :placeholder="$t('select.placeholder')"
              size="mini"
              style="width: 100%"
            >
              <el-option
                v-for="item in $store.getters['commodity/getCommodityCollectsByGcmFunction'](
                  formData.gcmFunction
                )"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              >
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #b4b4b4; font-size: 12px">
                  {{ item.gcmFunction }}
                </span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col> -->

        <!--GCM Cost-->
        <!-- <el-col :span="24">
          <el-form-item :label="$t('FdData.gcmCost')">
            <el-input
              v-model="formData.gcmCost"
              v-precision:gcmCost.n0="formData"
              type="number"
              @blur="handlerInput"
            />
          </el-form-item>
        </el-col> -->

        <!--gcmTotalCostDelta-->
        <el-col :span="24">
          <el-form-item :label="$t('FdData.gcmTotalCostDelta')">
            <el-input
              v-model="formData.gcmTotalCostDelta"
              v-precision:gcmTotalCostDelta="formData"
              type="number"
            />
          </el-form-item>
        </el-col>

        <!--GCM 报价备注-->
        <el-col :span="24">
          <el-form-item :label="$t('FdData.gcmCostRemark')">
            <el-input v-model="formData.gcmCostRemark" clearable :rows="3" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span style="display: block; text-align: center; margin-top: 5px">
      <!--取消按钮-->
      <el-button size="medium" type="danger" @click="cancel">
        {{ $t('button.cancel') }}
      </el-button>
      <!--保存按钮-->
      <el-button :loading="isRequesting" size="medium" type="primary" @click="save">
        {{ $t('button.save') }}
      </el-button>
    </span>
  </div>
</template>

<script>
import { fdCostSaveSingle } from '@/api/quote/cost'

export default {
  name: 'FdEvaluationEdit',
  props: {
    inputData: {
      type: Object,
      default: () => {}
    },
    currentRowNo: {
      type: Number,
      default: 0
    },
    gcmOwnerCommodityMp: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      isRequesting: false,
      formData: {}
    }
  },
  created() {
    this.pageDataInit()
  },
  methods: {
    pageDataInit() {
      // 将props传入的值复制给formData的值
      this.formData = this.$deepCopy(this.inputData)
    },
    async save() {
      // const commodityTrim = String(this.formData.commodity).trim()

      // if (commodityTrim === '' || commodityTrim === 'null') {
      //   this.$message({
      //     message: 'Commodity必填',
      //     type: 'error',
      //     duration: 1500
      //   })
      //   return
      // }

      const gcmCostTrim = String(this.formData.gcmTotalCostDelta).trim()

      if (gcmCostTrim === '' || gcmCostTrim === 'null') {
        this.$message({
          message: 'GCM Total Cost Delta必填',
          type: 'error',
          duration: 1500
        })
        return
      }

      try {
        this.isRequesting = true
        await fdCostSaveSingle(
          {
            commodity: this.formData.commodity,
            fdRowId: this.formData.fdRowId,
            // gcmCost: this.formData.gcmCost,
            gcmTotalCostDelta: this.formData.gcmTotalCostDelta,
            gcmCostRemark: this.formData.gcmCostRemark
          },
          { msgSuccess: true, msgError: true }
        )
        this.$emit('save', this.formData)
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    cancel() {
      this.$emit('cancel')
    }
    // handlerInput() {
    //   setTimeout(() => {
    //     const newGcmCost = this.formData.gcmCost
    //     const newQty = this.formData.newQty
    //     const basePrice = this.formData.basePrice
    //     const baseQty = this.formData.baseQty
    //     this.formData.gcmCostDelta = String(newGcmCost * newQty - basePrice * baseQty)
    //   }, 500)
    // }
  }
}
</script>

<style scoped>
.el-form-item__content span {
  margin-left: 5px;
  color: blue;
}
.el-form-item__content .null {
  color: #ccc;
}
</style>
